<template>
  <!-- 主页面左侧组件列表项 -->
  <!-- 打卡模式 -->
  <div id="vy-theme-face">
    <div class="vy-theme-list">
      <div class="vy-theme-container" ref="themes">
        <div class="vy-theme-panel">
          <div class="vy-wrapper">
            <div class="vy-box">
              <div class="vy-box-left">主题列表</div>
              <div class="vy-box-center">&nbsp;</div>
              <!-- <div class="vy-box-right">排序</div> -->
            </div>
            <div class="vy-box-desc">按照设定的时间顺序解锁主题</div>
          </div>
          <div class="vy-wrapper">
            <div class="vy-box">
              <!-- <div class="vy-box-left"></div> -->
              <div class="vy-box-center">
              <Calendar @changeMonth="click_change_month" ref="vy_calendar" class="vy-calendar-ym"></Calendar>
              </div>
              <!-- <div class="vy-box-right">今天</div> -->
              <!-- <div class="vy-box-center">
                <a-date-picker/>
              </div> -->
            </div>
          </div>
        </div>
        <div class="vy-theme-labels">
          <template v-if="tags.length">
            <div class="tab-item" v-for="tag in tags" :key="tag.id" 
              :class="{'actived': tag.selected}"
              @click="click_selected_tab(tag)">
              <div class="vy-tag">
                  <div class="vy-tag-center">
                    <span class="vy-tag-title">{{ tag.name }}</span>
                    <span class="vy-tag-time">
                      <span class="vy-tag-time_left">{{ tag.day }} | {{ tag.week }}</span>
                      <span class="vy-tag-time_right">
                        <template v-if="tag.relatedTopics == 'YES'">
                          <label class="signflag yes">已打卡</label>
                        </template>
                        <template v-else>
                          <label class="signflag no">未打卡</label>
                        </template>
                      </span>
                    </span>
                  </div>
                  <!-- <div class="vy-tag-right">
                    <a-dropdown :trigger="['click']">
                      <a-icon type="ellipsis" />
                      <a-menu slot="overlay">
                        <a-menu-item key="0">
                          <a-button
                            type="link"
                            icon="edit"
                            @click="click_rename_theme(tag)"
                            >重命名</a-button
                          >
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </div> -->
                </div>
            </div>
          </template>
        </div>
      </div>
      <a-modal
        :title="modalTitle"
        centered
        :maskClosable="false"
        :closable="false"
        v-model="modalVisible"
      >
        <template slot="footer">
          <a-button class="vy-modal_cancel" @click="click_modal_cancel"
            >取消</a-button
          >
          <a-button class="vy-modal_ok" type="primary" @click="click_modal_ok"
            >确认</a-button
          >
        </template>

        <vy-theme-edit ref="themeedit" :source="editItem"></vy-theme-edit>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Calendar from "vue-calendar-component";

import VyThemeEdit from "./tpl/edit_theme.vue";
import DateUtils from "../../../js/date.util.js";

export default {
  name: "vy-theme-face",
  data() {
    return {
      modalVisible: false, // modal 框 显隐状态
      modalType: 1, // 0: 新增; 1: 重命名
      editItem: {}, // 编辑的主题标签对象
      tags: [], // 主题列表
      tabActiveKey: -1, // 激活 tab 面板的 key
      projectId: null, // 项目id
      calendar_date: "" //当前年月,例如 2020年05月
    };
  },
  components: {
    Calendar,
    [VyThemeEdit.name]: VyThemeEdit
  },
  computed: {
    modalTitle() {
      let _title = "";
      switch (this.modalType) {
        case 0:
          _title = "新增主题";
          break;
        case 1:
          _title = "重命名";
          break;
      }
      return _title;
    }
  },
  filters: {
    showDateTime(val) {
      if (val) {
        let date = new Date(val.replace(/-/gi, "/"));
        return DateUtils.format(date, DateUtils.FMT.MDHM);
      }
    }
  },
  created() {
    this.projectId = this.$route.query.projectId;
  },
  mounted() {
    this.$nextTick(() => {
      this.setCalendar();
      // 监听主题列表刷新事件
      this.$bus.on("refreshThemeList", () => {
        this.setCalendar();
      });
    });
  },
  methods: {
    // 重置弹框内容
    resetModal() {
      this.editItem = {};
      this.modalType = 0;
      this.modalVisible = false;
    },
    // 设置日历年月
    setCalendar() {
      let now = new Date();
      let nowstr = DateUtils.format(now, DateUtils.FMT.YMD);
      this.$refs["vy_calendar"].ChoseMonth(nowstr);
    },
    // 左右点击切换月份
    click_change_month(date) {
      let datestr = DateUtils.format(new Date(date), DateUtils.FMT.YMD);
      let _date = datestr.split("-")[0] + "年" + datestr.split("-")[1] + "月";
      this.calendar_date = _date;
      // 查询信息
      this.queryInfo();
    },
    doTabActive(val) {
      console.log(val);
      // 将激活的tab面板选中值保存至缓存中
      sessionStorage.setItem("vy@activedKey", val);
      let _tag = this.tags.filter(tag => tag.id == val);
      if (_tag.length) {
        _tag[0].selected = true; // 选中主题项
        this.$bus.emit("activeLeftTab", _tag[0]); // 触发右侧组件事件
      } else {
        this.$bus.emit("activeLeftTab", {}); // 触发右侧组件事件
      }
    },
    // 查询项目信息
    queryInfo() {
      let params = {
        projectId: this.projectId,
        date: this.calendar_date
      };
      this.$axios.get("/module/list", { params }).then(res => {
        let list = res.moduleVos || [];
        if (!list.length) {
          this.$message.error("当前时间没有主题列表");
        }
        list.forEach(item => {
          if (item.startTime && moment.isDate(new Date(item.startTime))) {
            let _startTime = new Date(item.startTime);
            item.startTime = DateUtils.format(_startTime, DateUtils.FMT.YMDHMS);
          }
          if (item.endTime && moment.isDate(new Date(item.endTime))) {
            let _endTime = new Date(item.endTime);
            item.endTime = DateUtils.format(_endTime, DateUtils.FMT.YMDHMS);
          }
          item.selected = false;
        });
        // 排序
        // list.sort((a, b) => {
        //   return a.orderNum - b.orderNum;
        // });
        this.tags = list;
        // 设置之前选中的tab状态
        this.tabActiveKey = +(sessionStorage.getItem("vy@activedKey") || -1);
        // this.$bus.emit("activeLeftTab", this.tabActiveKey); // 触发右侧组件事件
        this.doTabActive(this.tabActiveKey);
      });
    },
    // 创建&更新 主题
    saveAndUpdateInfo(params) {
      let promise = null;
      if (this.modalType == 0) {
        // 创建
        delete params.id;
        promise = this.$axios.post("/module/create", params);
      } else if (this.modalType == 1) {
        delete params.projectId;
        // 更新
        promise = this.$axios.post("/module/update", params);
      }
      if (promise) {
        promise.then(
          res => {
            this.resetModal();
            if (res.success) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
            this.queryInfo(); // 重新查询主题列表
          },
          fail => {
            this.resetModal();
          }
        );
      }
    },
    // 删除主题
    deleteInfo(params) {
      this.$axios.post("/module/delete", params).then(res => {
        if (res.success) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
        this.queryInfo(); // 重新查询主题列表
      });
    },
    // 重命名主题 - 按钮
    click_rename_theme(item) {
      this.modalType = 1;
      this.editItem = item;
      this.modalVisible = true;
    },
    // 删除主题 - 按钮
    click_delete_theme(item) {
      this.$confirm({
        title: "温馨提示",
        content: "您确定要删除该主题吗？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          let params = { id: item.id };
          this.deleteInfo(params);
          this.tabActiveKey = "";
          this.doTabActive(this.tabActiveKey);
        },
        onCancel: () => {}
      });
    },
    // modal 框 - 取消
    click_modal_cancel() {
      this.resetModal();
    },
    // modal 框 - 确认按钮
    click_modal_ok() {
      let _formData = this.$refs["themeedit"].getFormData();
      if (!_formData.name) {
        this.$message.error("请输入主题名称");
        return;
      }
      let params = Object.assign(
        {
          projectId: this.projectId
        },
        _formData
      );
      this.saveAndUpdateInfo(params); // 创建&更新 主题
    },
    // 切换 tab 面板的回调
    click_selected_tab(item) {
      this.tags.forEach(tag => {
        tag.selected = false;
      });
      item.selected = true;
      this.tabActiveKey = item.id;
      this.doTabActive(this.tabActiveKey);
    }
  }
};
</script>

<style lang="scss">
#vy-theme-face {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .vy-theme-list {
    width: 100%;
    height: 100%;
    .vy-theme-container {
      .vy-theme-panel {
        padding: 25px;
        .vy-wrapper {
          padding: 10px 0 10px;
          .vy-box {
            display: flex;
            align-items: center;
            .vy-box-left {
              width: 100px;
              font-size: 18px;
              font-weight: 500;
              color: rgba(0, 0, 0, 1);
            }
            .vy-box-center {
              flex: 1;
              .vy-calendar-ym {
                .wh_content_all {
                  background: #ffffff;
                  padding-bottom: 0;
                  .wh_top_changge {
                    .wh_content_li {
                      color: #4f4f4f;
                    }
                    .wh_jiantou1 {
                      border-color: #4f4f4f;
                    }
                    .wh_jiantou2 {
                      border-color: #4f4f4f;
                    }
                  }
                  .wh_content {
                    display: none;
                  }
                }
              }
            }
            .vy-box-right {
              width: 50px;
              font-weight: 400;
              font-size: 13px;
              text-align: right;
              color: rgba(51, 102, 255, 1);
            }
          }
          .vy-box-desc {
            font-size: 12px;
            padding-top: 5px;
            font-weight: 400;
            color: rgba(184, 184, 184, 1);
          }
        }
        .vy-btn-wrapper {
          text-align: center;
          .ant-btn {
            color: rgba(51, 102, 255, 1);
            border-color: #3366ff;
          }
        }
      }
      .vy-theme-labels {
        .vy-tag {
          display: flex;
          padding: 0 15px;
          .vy-tag-left {
            width: 50px;
            margin: auto;
            color: #757575;
            text-align: center;
          }
          .vy-tag-center {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            .vy-tag-title {
              font-size: 16px;
              color: #4f4f4f;
            }
            .vy-tag-time {
              padding-top: 3px;
              font-size: 12px;
              display: flex;
              color: #b8b8b8;
              .vy-tag-time_left {
                flex: 1;
                text-align: left;
              }
              .vy-tag-time_right {
                flex: 1;
                text-align: right;
                margin-right: 10px;
                .signflag {
                  color: #ffffff;
                  padding: 3px;
                  &.yes {
                    background: #ccd9fd;
                  }
                  &.no {
                    background: #d9d8d8;
                  }
                }
              }
            }
          }
          .vy-tag-right {
            // padding: 0 10px;
            margin: auto;
            color: #757575;
            text-align: center;
            .anticon {
              margin-right: 0;
              transform: rotate(90deg);
              padding: 5px;
            }
          }
        }
        .tab-item {
          margin: 0;
          padding: 16px 8px 16px 0;
          cursor: pointer;
          position: relative;
          text-align: left;
          background: #ffffff;
          color: rgba(0, 0, 0, 0.65);
          border-bottom: 1px solid #ededed;
          &:first-child {
            border-top: 1px solid #ededed;
          }
          &:hover {
            color: #40a9ff;
          }
          &.actived {
            color: #3366ff;
            background: #f6f6f6;
            &::before {
              position: absolute;
              content: "";
              top: 0;
              bottom: 0;
              width: 5px;
              background: #1890ff;
            }
          }
        }
      }
    }
  }
}
.ant-dropdown-menu-item {
  .ant-btn {
    color: #4a4a4a;
  }
}

.ant-modal {
  .ant-modal-footer {
    .vy-modal_cancel {
      border: none;
    }
    .vy-modal_ok {
      background: rgba(51, 102, 255, 1);
    }
  }
}
</style>
